<template>
  <div class="monitor-wrapper">
    <!-- 标题 -->
    <div class="monitor-title">
      查看服务
      <Select v-model="select" @on-select="handleOnSelect" style="width:180px">
        <Option v-for="item in services" :value="item" :key="item">{{ item }}</Option>
      </Select>
      <Button style="margin-left: 10px;" @click="handelRefresh" size="small" type="primary" shape="circle" icon="ios-refresh">刷新 </Button>
    </div>
    <!-- 内容区域 -->
    <div class="monitor-content">
      <!-- 图标区域 -->
      <Row>
        <Col :xs="24" :sm="24" :md="12" :lg="12">
          <div style="padding: 10px;max-width: 800px;">
            <Card>
              <div style="text-align: center;">
                <h4>接口请求信息({{traces.length}})</h4>
              </div>
              <div style="height: 278px;overflow: auto;">
                <List>
                  <ListItem style="padding: 10px" v-for="(item,index) in traces" :key="index">
                    <Tag color="purple">请求方法：{{item.request.method}}</Tag>
                    <Tag color="geekblue" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" @click.native="handleTagClick(item)" :style="{cursor: 'pointer'}">接口：{{item.request.uri}}</Tag>
                    <Tag color="blue">状态: {{item.response.status}}</Tag>
                    <Tag color="green">耗时：{{item.timeTaken}} ms</Tag>
                  </ListItem>
                </List>
              </div>
            </Card>
          </div>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="12">
          <div style="padding: 10px;max-width: 800px;">
            <Card>
              <div style="text-align: center;">
                <h4>服务组件状态</h4>
              </div>
              <div style="height: 278px;overflow: auto;">
                <List>
                  <ListItem style="padding: 10px" v-for="(value, key, index) in componentData" :key="index">
                    <Tag color="purple" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">组件：{{key}}</Tag>
                    <Tag color="blue" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">状态: {{value.status}}</Tag>
                    <Tag color="green" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" @click.native="handleCompTagClick(value)" :style="{cursor: 'pointer'}">详情：{{value.details ? JSON.stringify(value.details,null,2) : JSON.stringify(value.components,null,2)}}</Tag>
                  </ListItem>
                </List>
              </div>
            </Card>
          </div>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="12">
          <div style="padding: 10px;max-width: 800px;">
            <Card>
              <div style="text-align: center;">
                <h4>JVM参数指标</h4>
              </div>
              <div style="text-align: center;padding: 10px;">
                <Row>
                  <Col :xs="12" :sm="12" :md="12" :lg="12">
                    <i-circle :percent="memory">
                      <h1>{{memory}}%</h1>
                      <span style="font-size: 12px;">已用内存</span>
                    </i-circle>
                  </Col>
                  <Col :xs="12" :sm="12" :md="12" :lg="12">
                    <i-circle :percent="thread">
                      <h1>{{thread}}</h1>
                      <span style="font-size: 12px;">存活线程</span>
                    </i-circle>
                  </Col>
                  <Col :xs="12" :sm="12" :md="12" :lg="12" style="padding-top: 8px;">
                    <i-circle :percent="classLoad">
                      <h1>{{classLoad}}</h1>
                      <span style="font-size: 12px;">已加载类</span>
                    </i-circle>
                  </Col>
                  <Col :xs="12" :sm="12" :md="12" :lg="12" style="padding-top: 8px;">
                    <i-circle :percent="httpCount">
                      <h1>{{httpCount}}</h1>
                      <span style="font-size: 12px;">请求总计</span>
                    </i-circle>
                  </Col>
                </Row>
              </div>
            </Card>
          </div>
        </Col>
        <Col :xs="24" :sm="24" :md="12" :lg="12">
          <div style="max-width: 800px;">
            <Continuous :title="continuousTitle" :xData="xData" :yData="yData" />
          </div>
        </Col>
      </Row>
    </div>

    <!-- 查看请求详情信息 -->
    <div>
      <Modal
        v-model="traceModel"
        title="查看详情"
        ok-text="返回"
        cancel-text=""
        width="750"
        class="detail-model"
      >
        <div class="input-box">
          <Input :border="false" v-model="content" type="textarea" :autosize="{minRows: 2,maxRows: 25}" readonly/>
        </div>
      </Modal>
    </div>

    <!-- 加载等待 -->
    <Spin fix v-show="show">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>处理中...</div>
    </Spin>
  </div>
</template>

<script>
import {getAllService,requestInfo,jvmInfo,componentInfo} from '@/api/base'
import Continuous from '@/components/echart-model/continuous'

const data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];


export default {
  name: 'Monitor',
  components: {
    Continuous
  },
  data(){
    return {
      select: '',
      services: [],
      continuousTitle:'接口访问量',
      xData: [],
      yData:[],
      traces: [],
      traceModel: false,
      content: '',
      show: false,
      memory: 0,
      thread: 0,
      httpCount: 0,
      classLoad: 0,
      componentData: {
        test: {
          status: 'UP',
          details: {}
        }
      }
    }
  },
  methods:{
    getService(){
      this.show = true
      getAllService().then(res => {
        this.show = true
        if(res.data.status){
          this.services = res.data.data.services
          if(this.services.length > 0){
            this.select = this.services[0]
            this.getTraceInfo(this.select)
            this.getJvmInfo(this.select)
            this.getComponentInfo(this.select)
          }
        }
      }).catch(()=>{
        this.show = false
      })
    },
    continuousInit(){
      let dateList = data.map(function (item) {
        return item[0];
      });
      let valueList = data.map(function (item) {
        return item[1];
      });
      this.xData = dateList
      this.yData = valueList
    },
    handleOnSelect(item){
      if(item && item.value.length > 0){
        this.getTraceInfo(item.value)
        this.getJvmInfo(item.value)
        this.getComponentInfo(item.value)
      }
    },
    getTraceInfo(serviceName){
      if(serviceName && serviceName.length > 0){
        this.show = true
        requestInfo(serviceName).then(res => {
          this.show = false
          if(res.data.status){
            this.traces = res.data.data.traces
          }
        }).catch(()=>{
          this.show = false
        })
      }
    },
    handleTagClick(item){
      this.traceModel = true
      this.content = JSON.stringify(item,null,2)
    },
    handelRefresh(){
      this.getTraceInfo(this.select)
      this.getJvmInfo(this.select)
    },
    getJvmInfo(serviceName){
      if(serviceName && serviceName.length > 0){
        this.show = true
        jvmInfo(serviceName).then(res => {
          this.show = false
          if(res.data.status){
            this.memory = res.data.data.memory
            this.thread = res.data.data.thread
            this.classLoad = res.data.data.classLoad
            this.httpCount = res.data.data.httpCount
          }
        }).catch(()=>{
          this.show = false
        })
      }
    },
    getComponentInfo(serviceName){
      if(serviceName && serviceName.length > 0){
        this.show = true
        componentInfo(serviceName).then(res => {
          this.show = false
          if(res.data.status){
            this.componentData = res.data.data
          }
        }).catch(()=>{
          this.show = false
        })
      }
    },
    handleCompTagClick(item){
      this.traceModel = true
      this.content = JSON.stringify(item,null,2)
    }
  },
  mounted(){
    this.getService()
    this.continuousInit()
  }
}
</script>

<style lang="less" scoped>
.monitor-wrapper{
  padding: 10px;
  .monitor-title{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .moitor-content{
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
</style>

<style scoped>
.detail-model >>> .ivu-modal-body{
  padding: 0;
}
</style>
